<template>
  <div class="system-home">
    <!-- 欢迎信息 -->
    <div class="welcome-section">
      <div class="welcome-text">
        <h2>您好，{{ userInfo.name }}</h2>
        <p>{{ greeting }}</p>
      </div>
      <div class="avatar">
        <img
:src="userInfo.avatar" alt="头像" />
      </div>
    </div>

    <!-- 待办事项 -->
    <div class="todo-card">
      <div class="card-header">
        <h3>待办事项</h3>
        <span class="badge">{{ todos.length }}</span>
      </div>
      <div class="card-content">
        <div
          v-for="(todo, index) in todos"
          :key="index"
          class="todo-item"
          @click="handleTodo(todo)"
        >
          <div class="todo-icon"
:class="todo.type">
            <img
:src="getTodoIcon(todo.type)" alt="图标" />
          </div>
          <div class="todo-content">
            <div class="title">
              {{ todo.title }}
            </div>
            <div class="meta">
              <span class="time">{{ todo.time }}</span>
              <span class="priority"
:class="todo.priority">
                {{ getPriorityText(todo.priority) }}
              </span>
            </div>
          </div>
        </div>
        <div
v-if="todos.length === 0" class="empty-todo">暂无待办事项</div>
      </div>
    </div>

    <!-- 数据概览 -->
    <div class="data-overview">
      <div v-for="(item, index) in overviewData"
class="overview-item" :key="index">
        <div class="value">
          {{ item.value }}
        </div>
        <div class="label">
          {{ item.label }}
        </div>
        <div class="trend"
:class="item.trend">
          <img
:src="getTrendIcon(item.trend)" alt="趋势" />
          {{ item.trendValue }}%
        </div>
      </div>
    </div>

    <!-- 最近客户 -->
    <div class="recent-card">
      <div class="card-header">
        <h3>最近客户</h3>
        <router-link
to="/clients" class="more-link">查看全部</router-link>
      </div>
      <div class="card-content">
        <div
          v-for="(client, index) in recentClients"
          :key="index"
          class="client-item"
          @click="viewClient(client)"
        >
          <div class="client-avatar">
            <img
:src="client.avatar" alt="客户头像" />
          </div>
          <div class="client-info">
            <div class="name">
              {{ client.name }}
            </div>
            <div class="meta">
              <span>{{ client.type }}</span>
              <span>{{ client.time }}</span>
            </div>
          </div>
          <div class="client-status"
:class="client.status">
            {{ client.status === 'active' ? '活跃' : '非活跃' }}
          </div>
        </div>
      </div>
    </div>

    <!-- 最近合同 -->
    <div class="recent-card">
      <div class="card-header">
        <h3>最近合同</h3>
        <router-link
to="/contracts" class="more-link">查看全部</router-link>
      </div>
      <div class="card-content">
        <div
          v-for="(contract, index) in recentContracts"
          :key="index"
          class="contract-item"
          @click="viewContract(contract)"
        >
          <div class="contract-info">
            <div class="title">
              {{ contract.title }}
            </div>
            <div class="meta">
              <span>{{ contract.client }}</span>
              <span>{{ contract.amount }}</span>
            </div>
          </div>
          <div class="contract-status"
:class="contract.status">
            {{ getContractStatus(contract.status) }}
          </div>
        </div>
      </div>
    </div>

    <!-- 最近案件 -->
    <div class="recent-card">
      <div class="card-header">
        <h3>最近案件</h3>
        <router-link
to="/cases" class="more-link">查看全部</router-link>
      </div>
      <div class="card-content">
        <div
          v-for="(caseItem, index) in recentCases"
          :key="index"
          class="case-item"
          @click="viewCase(caseItem)"
        >
          <div class="case-info">
            <div class="title">
              {{ caseItem.title }}
            </div>
            <div class="meta">
              <span>{{ caseItem.client }}</span>
              <span>{{ caseItem.time }}</span>
            </div>
          </div>
          <div class="case-status"
:class="caseItem.status">
            {{ getCaseStatus(caseItem.status) }}
          </div>
        </div>
      </div>
    </div>

    <!-- 快捷操作按钮 -->
    <div class="quick-actions">
      <button class="action-btn"
@click="addClient">
        <img
src="@/assets/add-client-icon.png" alt="添加客户" />
        添加客户
      </button>
      <button class="action-btn"
@click="addContract">
        <img
src="@/assets/add-contract-icon.png" alt="添加合同" />
        添加合同
      </button>
      <button class="action-btn"
@click="addCase">
        <img
src="@/assets/add-case-icon.png" alt="添加案件" />
        添加案件
      </button>
    </div>
  </div>
</template>

<script setup>
  import { ref, computed } from 'vue'

  const userInfo = ref({
    name: '李四',
    avatar: '@/assets/user-avatar.png',
  })

  const greeting = computed(() => {
    const hour = new Date().getHours()
    if (hour < 6) return '凌晨好'
    if (hour < 9) return '早上好'
    if (hour < 12) return '上午好'
    if (hour < 14) return '中午好'
    if (hour < 17) return '下午好'
    if (hour < 19) return '傍晚好'
    return '晚上好'
  })

  const todos = ref([
    {
      id: 1,
      title: '合同HT20250001待审核',
      time: '10分钟前',
      type: 'contract',
      priority: 'high',
    },
    {
      id: 2,
      title: '客户张三资料待完善',
      time: '1小时前',
      type: 'client',
      priority: 'medium',
    },
    {
      id: 3,
      title: '案件AJ20250001状态更新',
      time: '2小时前',
      type: 'case',
      priority: 'low',
    },
  ])

  const overviewData = ref([
    {
      label: '本月新增客户',
      value: 24,
      trend: 'up',
      trendValue: 15,
    },
    {
      label: '本月合同金额',
      value: '¥125K',
      trend: 'up',
      trendValue: 8,
    },
    {
      label: '本月案件数',
      value: 18,
      trend: 'down',
      trendValue: 5,
    },
  ])

  const recentClients = ref([
    {
      id: 1,
      name: '张三',
      avatar: '@/assets/client-avatar1.png',
      type: '个人客户',
      time: '10分钟前',
      status: 'active',
    },
    {
      id: 2,
      name: '李四企业',
      avatar: '@/assets/client-avatar2.png',
      type: '企业客户',
      time: '1小时前',
      status: 'active',
    },
    {
      id: 3,
      name: '王五',
      avatar: '@/assets/client-avatar3.png',
      type: '个人客户',
      time: '1天前',
      status: 'inactive',
    },
  ])

  const recentContracts = ref([
    {
      id: 'HT20250001',
      title: '技术服务协议',
      client: '张三',
      amount: '¥15,000',
      status: 'active',
    },
    {
      id: 'HT20250002',
      title: '软件开发合同',
      client: '李四企业',
      amount: '¥50,000',
      status: 'pending',
    },
    {
      id: 'HT20250003',
      title: '咨询服务协议',
      client: '王五',
      amount: '¥8,000',
      status: 'expired',
    },
  ])

  const recentCases = ref([
    {
      id: 'AJ20250001',
      title: '技术服务纠纷',
      client: '张三',
      time: '2025-05-10',
      status: 'processing',
    },
    {
      id: 'AJ20250002',
      title: '合同变更申请',
      client: '李四企业',
      time: '2025-08-05',
      status: 'completed',
    },
    {
      id: 'AJ20250003',
      title: '服务质量投诉',
      client: '王五',
      time: '2025-09-01',
      status: 'pending',
    },
  ])

  const getTodoIcon = type => {
    switch (type) {
      case 'client':
        return '@/assets/client-icon.png'
      case 'contract':
        return '@/assets/contract-icon.png'
      case 'case':
        return '@/assets/case-icon.png'
      default:
        return '@/assets/todo-icon.png'
    }
  }

  const getPriorityText = priority => {
    switch (priority) {
      case 'high':
        return '高'
      case 'medium':
        return '中'
      case 'low':
        return '低'
      default:
        return '普通'
    }
  }

  const getTrendIcon = trend => {
    return trend === 'up' ? '@/assets/trend-up.png' : '@/assets/trend-down.png'
  }

  const getContractStatus = status => {
    switch (status) {
      case 'active':
        return '生效中'
      case 'pending':
        return '待签约'
      case 'expired':
        return '已到期'
      default:
        return '未知'
    }
  }

  const getCaseStatus = status => {
    switch (status) {
      case 'processing':
        return '处理中'
      case 'completed':
        return '已完成'
      case 'pending':
        return '待处理'
      default:
        return '未知'
    }
  }

  const handleTodo = todo => {
    console.log('处理待办事项:', todo)
  }

  const viewClient = client => {
    console.log('查看客户:', client)
  }

  const viewContract = contract => {
    console.log('查看合同:', contract)
  }

  const viewCase = caseItem => {
    console.log('查看案件:', caseItem)
  }

  const addClient = () => {
    console.log('添加客户')
  }

  const addContract = () => {
    console.log('添加合同')
  }

  const addCase = () => {
    console.log('添加案件')
  }
</script>

<style scoped lang="scss">
  .system-home {
    padding: 15px;

    .welcome-section {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      .welcome-text {
        h2 {
          margin: 0 0 5px 0;
          font-size: 20px;
        }

        p {
          margin: 0;
          color: #666;
        }
      }

      .avatar {
        width: 50px;
        height: 50px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          border: 2px solid #f0f0f0;
        }
      }
    }

    .todo-card {
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      margin-bottom: 15px;
      overflow: hidden;

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        border-bottom: 1px solid #f0f0f0;

        h3 {
          margin: 0;
          font-size: 16px;
        }

        .badge {
          background: #ff4d4f;
          color: white;
          font-size: 12px;
          min-width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          border-radius: 10px;
          padding: 0 6px;
        }
      }

      .card-content {
        padding: 0 15px;

        .todo-item {
          display: flex;
          padding: 15px 0;
          border-bottom: 1px solid #f0f0f0;

          &:last-child {
            border-bottom: none;
          }

          .todo-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;

            &.client {
              background: #e6f7ff;
            }

            &.contract {
              background: #fff7e6;
            }

            &.case {
              background: #f6ffed;
            }

            img {
              width: 20px;
              height: 20px;
            }
          }

          .todo-content {
            flex: 1;

            .title {
              font-size: 15px;
              margin-bottom: 5px;
            }

            .meta {
              display: flex;
              justify-content: space-between;
              font-size: 12px;

              .time {
                color: #999;
              }

              .priority {
                padding: 2px 6px;
                border-radius: 3px;

                &.high {
                  background: #fff1f0;
                  color: #f5222d;
                }

                &.medium {
                  background: #fff7e6;
                  color: #fa8c16;
                }

                &.low {
                  background: #f6ffed;
                  color: #52c41a;
                }
              }
            }
          }
        }

        .empty-todo {
          padding: 30px 0;
          text-align: center;
          color: #999;
        }
      }
    }

    .data-overview {
      display: flex;
      gap: 10px;
      margin-bottom: 15px;

      .overview-item {
        flex: 1;
        background: white;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

        .value {
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 5px;
        }

        .label {
          font-size: 12px;
          color: #999;
          margin-bottom: 10px;
        }

        .trend {
          display: flex;
          align-items: center;
          font-size: 12px;

          img {
            width: 12px;
            height: 12px;
            margin-right: 5px;
          }

          &.up {
            color: #52c41a;
          }

          &.down {
            color: #f5222d;
          }
        }
      }
    }

    .recent-card {
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      margin-bottom: 15px;
      overflow: hidden;

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        border-bottom: 1px solid #f0f0f0;

        h3 {
          margin: 0;
          font-size: 16px;
        }

        .more-link {
          font-size: 14px;
          color: #1989fa;
          text-decoration: none;
        }
      }

      .card-content {
        padding: 0 15px;

        .client-item {
          display: flex;
          align-items: center;
          padding: 15px 0;
          border-bottom: 1px solid #f0f0f0;

          &:last-child {
            border-bottom: none;
          }

          .client-avatar {
            width: 40px;
            height: 40px;
            margin-right: 10px;

            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }

          .client-info {
            flex: 1;

            .name {
              font-size: 15px;
              font-weight: bold;
              margin-bottom: 5px;
            }

            .meta {
              font-size: 12px;
              color: #999;

              span {
                margin-right: 10px;
              }
            }
          }

          .client-status {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;

            &.active {
              background: #f6ffed;
              color: #52c41a;
            }

            &.inactive {
              background: #f5f5f5;
              color: #999;
            }
          }
        }

        .contract-item,
        .case-item {
          padding: 15px 0;
          border-bottom: 1px solid #f0f0f0;

          &:last-child {
            border-bottom: none;
          }

          .contract-info,
          .case-info {
            margin-bottom: 10px;

            .title {
              font-size: 15px;
              font-weight: bold;
              margin-bottom: 5px;
            }

            .meta {
              font-size: 12px;
              color: #999;

              span {
                margin-right: 10px;
              }
            }
          }

          .contract-status,
          .case-status {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
          }

          .contract-status {
            &.active {
              background: #e6f7ff;
              color: #1890ff;
            }

            &.pending {
              background: #fff7e6;
              color: #fa8c16;
            }

            &.expired {
              background: #fff1f0;
              color: #f5222d;
            }
          }

          .case-status {
            &.processing {
              background: #e6f7ff;
              color: #1890ff;
            }

            &.completed {
              background: #f6ffed;
              color: #52c41a;
            }

            &.pending {
              background: #fff7e6;
              color: #fa8c16;
            }
          }
        }
      }
    }

    .quick-actions {
      display: flex;
      gap: 10px;
      margin-top: 20px;

      .action-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #1989fa;
        color: white;
        border: none;
        border-radius: 8px;
        padding: 15px;

        img {
          width: 24px;
          height: 24px;
          margin-bottom: 8px;
        }
      }
    }
  }
</style>
